<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Right-Click on jqxTreeGrid to display a Context Menu.</title>
 
<link rel="stylesheet" href="../js/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../js/jqwidgets/styles/jqx.black.css" type="text/css" />
<script type="text/javascript" src="../js/jquery/jquery-1.10.2.min.js"></script>


<script type="text/javascript" src="js/theme.js"></script>
<script type="text/javascript" src="../js/jqwidgets/jqx-all.js"></script>

<script type="text/javascript" src="../js/scroll/jquery.tinyscrollbar.js"></script>
    
    
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                dataType: "csv",
                dataFields: [
                    { name: 'EmployeeKey', type: 'number' },
                    { name: 'ParentEmployeeKey', type: 'number' },
                    { name: 'FirstName', type: 'string' },
                    { name: 'LastName', type: 'string' },
                    { name: 'Title', type: 'string' },
                    { name: 'HireDate', type: 'date' },
                    { name: 'BirthDate', type: 'date' },
                    { name: 'Phone', type: 'string' },
                    { name: 'Gender', type: 'string' },
                    { name: 'DepartmentName', type: 'string' }
                ],
                hierarchy:
                {
                    keyDataField: { name: 'EmployeeKey' },
                    parentDataField: { name: 'ParentEmployeeKey' }
                },
                id: 'EmployeeKey',
                url: 'aaaa.csv'
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // create Tree Grid
            $("#treeGrid").jqxTreeGrid(
            {
                width: 850,
                source: dataAdapter,
                columnsResize: true,
                ready: function () {
                    // expand row with 'EmployeeKey = 32'
                    $("#treeGrid").jqxTreeGrid('expandRow', 32);
                },
                columns: [
                  { text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 200 },
                  { text: 'LastName', dataField: 'LastName', width: 200 },
                  { text: 'Department Name', dataField: 'DepartmentName', width: 200 },
                  { text: 'Title', dataField: 'Title', width: 300 },
                  { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
                  { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
                  { text: 'Phone', dataField: 'Phone', cellsFormat: 'd', width: 120 }
                ]
            });

            // create context menu
            var contextMenu = $("#Menu").jqxMenu({ width: 200, height: 58, autoOpenPopup: false, mode: 'popup' });

            $("#treeGrid").on('contextmenu', function () {
                return false;
            });

            $("#treeGrid").on('rowClick', function (event) {
                var args = event.args;
                if (args.originalEvent.button == 2) {
                    var scrollTop = $(window).scrollTop();
                    var scrollLeft = $(window).scrollLeft();
                    contextMenu.jqxMenu('open', parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);

                    return false;
                }
            });

            $("#Menu").on('itemclick', function (event) {
                var args = event.args;
                var selection = $("#treeGrid").jqxTreeGrid('getSelection');
                var rowid = selection[0].uid
                if ($.trim($(args).text()) == "Edit Selected Row") {
                    $("#treeGrid").jqxTreeGrid('beginRowEdit', rowid);
                } else {
                    $("#treeGrid").jqxTreeGrid('deleteRow', rowid);
                }
            });
        });
    </script>
<style type="text/css">
@charset "utf-8";
/* Core Code */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	padding:0;
	font-size:14px;
	line-height:100%;
	font-family:Arial, sans-serif;
	color:#FFF;
	margin:0;
}
/* Remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	background-color: #333;
	overflow:hidden;
	
}
ul, ol {
	list-style:none;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table {
	border-collapse:separate;
	border-spacing:0;
}
caption, th, td {
	font-weight:normal;
}
/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/* 圆角*/
.borderRadius {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 5px;
}
div {
	
	overflow:hidden;
}
img {
	border:none;
}
a {
	color:#000;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
#backbord {
	background-color: #666;
}
#header {
	background-color: #FFF;
	background-image: url(../images/header.gif);
	background-repeat: repeat-x;
	height: 56px;
}
#background {
	background-color: #333333;
	width: 100%;
	height: 100%;
}

#flooder {
	background-image: url(../images/gen_info_item.png);
	background-color:#00F;
	background-repeat: repeat-x;
	height: 32px;
}

#toolBarUp {
	background-image: url(../images/leftmenu_up.gif);
	width:72px;
	height:142px;
}
#toolBarDown {
	background-image: url(../images/leftmenu_down.gif);
	background-repeat: no-repeat;
	height: 140px;
	width: 72px;
}
#lefgToolBar {
	float:left;
	width: 72px;
	height:679px;
}
#center {
	height: 679px;
	clear: both;
}
#body_content {
	margin:0 auto;
	width:100%;
}
/******************实时部分界面框架css******************/


</style>
</head>
<body class='default'>
    <div id="treeGrid">
    </div>
    <div id='Menu'>
        <ul>
            <li>Edit Selected Row</li>
            <li>Delete Selected Row</li>
        </ul>
    </div>
</body>
</html>